<template>
    <view class="page_login">
		<!-- 头部logo -->
		<headLogo/>
		
		<!-- 登录form -->
		<view class="login_form" v-if="webMode == 'h5'">
			<view class="input">
				<view class="img">
					<image style="width:27px;height: 27px;" :src="imgInfo.icon_user" />
				</view>
				<m-input class="m-input" type="text" clearable focus v-model="account" placeholder="请输入账号">
				</m-input>
			</view>
			<view class="line" />
			<view class="input">
				<view class="img">
					<image style="width:20px;height: 25px;" :src="imgInfo.icon_pwd" />
				</view>
				<m-input type="password" displayable v-model="password" placeholder="请输入密码"></m-input>
			</view>
		</view>
		
		<!-- 微信网页登录 -->
		<view class="btn-row" v-if="webMode != 'h5'">
			<button type="warn" @tap="bindLogin(1)" @getuserinfo="bindLogin" open-type="getUserInfo"  withCredentials="true" style="width: 60%;" >登录</button>
		</view>
		
		<!-- 提交 -->
		<view class="btn-row" v-if="webMode == 'h5'">
		    <button type="primary" class="primary" @tap="bindLogin(1)" open-type="getUserInfo"  withCredentials="true">登录</button>
		</view>
		
		<!-- 忘记密码 -->
        <view class="action-row"  v-if="webMode == 'h5'">
            <navigator url="../login/reg">注册账号</navigator>
            <text style="flex:1;"></text>
            <navigator url="../login/pwd">忘记密码</navigator>
        </view>
		<!-- 快速登录 -->
		<view class="quick_login_line oauth-row" v-if="hasProvider && webMode == 'h5'" v-bind:style="{top:positionTop + 'px'}" >
			<view class="line" />
			<text class="text">快速登录</text>
			<view class="line" />
		</view>
        <view class="oauth-row" v-if="hasProvider && webMode == 'h5'" v-bind:style="{top: positionTop + 'px'}">
            <view class="oauth-image" v-for="provider in providerList" :key="provider.value">
                <image :src="provider.image" @tap="oauth(provider.value)"></image>
            </view>
        </view>
    </view>
</template>


<script>
    import { mapState,mapMutations,mapActions } from 'vuex'
    import mInput from '../../components/m-input.vue'
    import headLogo from './headLogo.vue'
	import config from '@/config/config'
    export default {
        components: { mInput,headLogo },
        data() {
            return {
				webMode:"wx-web",
                providerList: [],
                hasProvider: false,
                account: '',
                password: '',
                positionTop: 0,
				imgInfo: {
					icon_user:'../../static/img/icon_user.png',
					icon_pwd:'../../static/img/icon_pwd.png'
				}
            }
        },
        computed: mapState(['forcedLogin']),
		onReady() {
			this.initPosition();
			this.initProvider();
		},
		onLoad:function(){
			if(config.webMode == 'wx-web'){
				this.webMode = 'wx-web';
			}else if(config.webMode == 'wx-app'){
				this.webMode = 'wx-app';
			}else{
				this.webMode = 'h5';
			}
		},
        methods: {
			...mapActions(['autoModeLogin']),
            ...mapMutations(['login']),
			//获取微信登录等图标权限
            initProvider() {
                const filters = ['weixin', 'qq'];  //, 'sinaweibo'
                uni.getProvider({
                    service: 'oauth',
                    success: (res) => {
                        if (res.provider && res.provider.length) {
                            for (let i = 0; i < res.provider.length; i++) {
                                if (~filters.indexOf(res.provider[i])) {
                                    this.providerList.push({
                                        value: res.provider[i],
                                        image: '../../static/img/' + res.provider[i] + '.png'
                                    });
                                }
                            }
							if(window){
								this.hasProvider = true;
							}
                        }
                    },
                    fail: (err) => {
                        console.error('获取服务供应商失败：' + JSON.stringify(err));
                    }
                });
            },
            initPosition() {
                this.positionTop = uni.getSystemInfoSync().windowHeight - 85;
            },
			//登录
            bindLogin(mode) {
				if(this.webMode != "h5"){
					this.autoModeLogin(mode).then(()=>{
						uni.switchTab({ url: '../main/main'});
					});
				}else{
					if (this.account.length < 1) {
					    uni.showToast({icon: 'none',title: '账号不能为空'});
					    return;
					}
					if (this.password.length < 1) {
					    uni.showToast({icon: 'none',title: '密码不能为空'});
					    return;
					}
					this.$request("/app/soft/Authorization/login",{
					    account: this.account,
					    password: this.password
					}).then(res=>{
						this.toMain(res.data);
					});
				}
            },
			// 第三方登录
            oauth(value) {
				var that=this;
                uni.login({
                    provider: value,
                    success: (res) => {
                        uni.getUserInfo({
                            provider: value,
                            success: (infoRes) => {
								let userInfo = infoRes.userInfo;
								if(value=="qq"){
									uni.setStorageSync("headImgurl",userInfo.figureurl_2);
								}
								if(value=="weixin"){
									uni.setStorageSync("headImgurl",userInfo.avatarUrl);
									userInfo.gender= userInfo.gender == 1 ? "男" : "女";
								}
								userInfo.headImgurl = uni.getStorageSync("headImgurl");
								this.$request("/app/soft/Authorization/login",userInfo).then(res=>{
									this.toMain(res.data);
								});
                            }
                        });
                    },
                    fail: (err) => {
                        console.error('授权登录失败：' + JSON.stringify(err));
                    }
                });
            },
            toMain(data) {
				if(data){ 
					this.login(data); 
					uni.reLaunch({ url: '../main/main'});
				}
                
            }
        }
    }
</script>

<style  lang="scss">
	@import 'login.scss';
</style>
